<template>
  <el-dialog
    class="avue-dialog my-dialog"
    title="详情"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <!-- 表格 -->
    <avue-crud
      class="my-crud"
      ref="crud"
      :data="tableData"
      :option="tableOption"
    >
    </avue-crud>
    <span slot="footer" class="dialog-footer">
      <el-button
        size="small"
        icon="el-icon-circle-close"
        @click="$emit('close')"
        >关 闭</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "DetailList",
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogVisible: true,
    };
  },
  computed: {
    tableOption() {
      return {
        addBtn: false,
        editBtn: false,
        border: true,
        refreshBtn: false,
        columnBtn: false,
        delBtn: false,
        menu: false,
        tip: false,
        maxHeight: 400,
        column: [
          {
            label: "排班人员",
            prop: "userName",
          },
          {
            label: "联系方式",
            prop: "phone",
          },
          {
            label: "备注",
            prop: "remark",
          },
        ],
      };
    },
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.my-crud ::v-deep .avue-crud__menu {
  display: none !important;
}

.my-dialog ::v-deep .el-dialog__body {
  margin-bottom: 0px !important;
}
</style>